Adwaita: .flat button styling

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index c54144a7191a57d7dd2740f0767f5b5298467808..5ac4a7f0502bf64c7b307e757ed592ab6f208b0e 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -200,14 +200,14 @@
   transition: all 200ms ease-out;
   padding: 4px 6px;
   @include button(normal);
-  &:hover {
+  &:hover, &.flat:hover {
     @include button(hover);
     -gtk-image-effect: highlight;
   }
-  &:active {
+  &:active, &.flat:active {
     @include button(active);
   }
-  &:backdrop {
+  &:backdrop, &.flat:backdrop {
     @include button(backdrop);
     &:active {
       @include button(backdrop-active);
@@ -219,16 +219,19 @@
       @include button(backdrop-insensitive-active);
     }
   }
-  &:selected,
-  &:selected:focus {
+  &:selected, &.flat:selected,
+  &:selected:focus, &.flat:focus {
     @extend %selected_items;
   }
   &:insensitive {
     @include button(insensitive);
-    &:active {
+    &:active, &.flat:active {
       @include button(insensitive-active);
     }
   }
+  &.flat, &.flat:backdrop {
+    @extend %undecorated_button;
+  }
   //overlay / OSD style
   .osd & {
     padding: 6px;
@@ -321,7 +324,7 @@
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  box-shadow: none;
+  box-shadow: inset 0 1px transparentize(white,1);
 }
 
 /* menu buttons */

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index d217bb36611bafd109b1112c7dd736b603aba299..fbb4fe7de533f0790d8a42999cf6ef6dada89684 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -212,7 +212,7 @@
   text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
   icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-  .button:hover {
+  .button:hover, .button.flat:hover {
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
@@ -222,7 +222,7 @@
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
     -gtk-image-effect: highlight; }
-  .button:active {
+  .button:active, .button.flat:active {
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
@@ -231,7 +231,7 @@
     text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
     box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
-  .button:backdrop {
+  .button:backdrop, .button.flat:backdrop {
     border-width: 1px;
     border-style: solid;
     color: #c9cbc9;
@@ -240,21 +240,21 @@
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-    .button:backdrop:active {
+    .button:backdrop:active, .button.flat:backdrop:active {
       border-width: 1px;
       border-style: solid;
       color: #c9cbc9;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #2f3434);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-    .button:backdrop:insensitive {
+    .button:backdrop:insensitive, .button.flat:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-    .button:backdrop:insensitive:active {
+    .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
       border-width: 1px;
       border-style: solid;
       color: #454c4c;
@@ -270,7 +270,7 @@
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
-    .button:insensitive:active {
+    .button:insensitive:active, .button:insensitive.flat:active {
       border-width: 1px;
       border-style: solid;
       color: #939695;
@@ -437,11 +437,11 @@
     border-radius: 3px;
     border-style: solid; }
 
-.button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
+.button.flat, .button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  box-shadow: none; }
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
 /* menu buttons */
 .menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
@@ -2147,11 +2147,11 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(201, 203, 201, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button:selected:focus {
+.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
   background-color: #215d9c;
   color: white;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected {
+  .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
     color: #2c2c2c; }
 
 /**********

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 3e9b16d6e2280b9379460bc2d3e1f1f05b509cc1..2df5e8064ec199c02c1825ba8ee6ce869d1ee5d2 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -212,7 +212,7 @@
   text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   box-shadow: inset 0 1px white, 0 1px white; }
-  .button:hover {
+  .button:hover, .button.flat:hover {
     border-width: 1px;
     border-style: solid;
     color: #2e3436;
@@ -222,7 +222,7 @@
     icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     box-shadow: inset 0 1px white, 0 1px white;
     -gtk-image-effect: highlight; }
-  .button:active {
+  .button:active, .button.flat:active {
     border-width: 1px;
     border-style: solid;
     color: #2e3436;
@@ -231,7 +231,7 @@
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
-  .button:backdrop {
+  .button:backdrop, .button.flat:backdrop {
     border-width: 1px;
     border-style: solid;
     color: #54595a;
@@ -240,21 +240,21 @@
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-    .button:backdrop:active {
+    .button:backdrop:active, .button.flat:backdrop:active {
       border-width: 1px;
       border-style: solid;
       color: #54595a;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #d4d4d4);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-    .button:backdrop:insensitive {
+    .button:backdrop:insensitive, .button.flat:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-    .button:backdrop:insensitive:active {
+    .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
       border-width: 1px;
       border-style: solid;
       color: #c7c7c7;
@@ -270,7 +270,7 @@
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
-    .button:insensitive:active {
+    .button:insensitive:active, .button:insensitive.flat:active {
       border-width: 1px;
       border-style: solid;
       color: #8d9091;
@@ -437,11 +437,11 @@
     border-radius: 3px;
     border-style: solid; }
 
-.button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
+.button.flat, .button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  box-shadow: none; }
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
 /* menu buttons */
 .menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
@@ -2145,11 +2145,11 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(84, 89, 90, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button:selected:focus {
+.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
   background-color: #4a90d9;
   color: white;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected {
+  .view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
     color: #fcfcfc; }
 
 /**********